﻿@model throneOfGames.Models.IndexViewModel
@{
    ViewBag.Title = "Throne of Games";
}

@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>@ViewBag.Title.</h1>
                <h2>@ViewBag.Message</h2>
            </hgroup>
        </div>
    </section>
}
<link href='http://fonts.googleapis.com/css?family=Cuprum&subset=latin' rel='stylesheet' type='text/css'>

<div id="site-container">
    <div id="leaderboard">
        <h3>Leaderboard</h3>
        <ul class="nav">
            <li class="nav1"><a href="#kof" class="selected">King of Tokyo</a></li>
            <li class="nav2"><a href="#ttt" class="unSelected">Tic Tac Toe</a></li>
        </ul>
        <ol>
            @foreach (var l in @Model.leaderboardData)
            {
                if(l.Leaderboard.Boardgame.name == "TicTacToe")
                {
                    <li class="TTTLeaderboard">@l.User.userName: @l.score</li>
                }
                else if (l.Leaderboard.Boardgame.name == "King of Tokyo")
                {
                    <li class="KoTLeaderboard">@l.User.userName: @l.score</li>
                }
            }
        </ol>
    </div>
    <div id="main-container">
        <div id="active-games">
            <h3>Active games.</h3>
            <ol>
                @foreach (var g in Model.games)
                {
                    if(Request.IsAuthenticated)
                    {
                        <li>@Html.ActionLink(@g.Boardgame.name, "Lobby", "Game", new { id = @g.ID, user = User.Identity.Name }, new { })</li>
                    }
                    else
                    {
                        <li>@Html.ActionLink(@g.Boardgame.name, "Login", "User")</li>
                    }
                }
            </ol>
        </div>

        <div id="make-account">
            <h3>Sign up.</h3>
            <form action="/User/Register" method="post" id="registerForm">
                <p>Name:
                    <input type="text" name="name-field" id="name-field" /></p>
                <p>Password:
                    <input type="password" name="password-field" id="password-field" /></p>
                <p>Email:
                    <input type="text" name="email-field" id="email-field" /></p>

                <input type="submit" class="registerButton" value="Create" />
            </form>
        </div>
    </div>

    <div id="confirmOverlay">
        <div id="confirmBox">
            <h1>Successful registration</h1>
            <p>You can now log in and start playing</p>

            <div id="confirmButtons">
                <a class="okButton" href="#">Ok<span></span></a>
            </div>
        </div>
    </div>
</div>
